﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <input type="button" value="浪起来" @click="lang"/>
    <input type="button" value="低调"/>
    <h4>{{msg}}</h4>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg:"猥琐发育，别浪~",
                intervalId:null
            },
            methods:{
                lang(){
                    console.log(this.msg);
                    if(this.intervalId===null){
                        this.intervalId= setInterval(()=>{
                        var start=this.msg.substring(0,1),end=this.msg.substring(1);
                        this.msg=`${end}${start}`;
                        },400);
                    }                    
                },
                stop(){
                    clearInterval(this.intervalId);
                    this.intervalId=null;
                }
            }
        })
    </script>
</body>
</html>